<template>
	<view class="detail-ap">
		<!-- <view class="tabList">
			<u-tabs item-width="350" height="80" bar-width="80" :list="tabList" :is-scroll="true" :current="tabCurrent"
				@change="tabChange"></u-tabs>
		</view> -->
		<scroll-view scroll-y class="main">
			
			<view class="Category_title">
				<view class="line"></view>基本信息
			</view>
			<view class="item-wrap">
				<view class="title">姓名</view>
				<view class="content">{{detailmsg.name}}</view>
			</view>
			<view class="item-wrap">
				<view class="title">身份证</view>
				<view class="content">{{detailmsg.identityCard}}</view>
			</view>
			<view class="item-wrap">
				<view class="title">手机号</view>
				<view class="content">{{detailmsg.contact}}</view>
			</view>
			<view class="item-wrap">
				<view class="title">车牌号</view>
				<view class="content">{{detailmsg.plateInfo}}</view>
			</view>
			<view class="image-wrape">
				<view class="title">身份证照片</view>
				<view class="image-panel">
					<image :src="item" v-for="(item,index) in detailmsg.ossShfz" @click="previewPic(item)"></image>
				</view>
			</view>
			<view class="image-wrape">
				<view class="title">从业资格</view>
				<view class="image-panel">
					<image :src="item" v-for="(item,index) in detailmsg.certificateCy" @click="previewPic(item)"></image>
				</view>
			</view>
			<view class="image-wrape">
				<view class="title">驾驶</view>
				<view class="image-panel">
					<image :src="item" v-for="(item,index) in detailmsg.driverLicense" @click="previewPic(item)"></image>
				</view>
			</view>
			<view class="image-wrape">
				<view class="title">暂住证照片</view>
				<view class="image-panel">
					<image :src="item" v-for="(item,index) in detailmsg.temporaryResidencePermit" @click="previewPic(item)"></image>
				</view>
			</view>
		</scroll-view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		driverDetail
	} from '@/pages/api/report/orderp.js'
	export default {
		components: {
		},
		data() {
			return {
				personShow: false, //转发人员弹窗
				departmentShow: false,
				personList: [], //人员列表
				id: '',
				idd: '',
				plateNumber: '',
				detailmsg: {}
			}
		},
		onLoad(op) {
			this.id = op.id
			this.plateNumber = op.plateNumber
			this.getolddetail(this.id)
		},
		mounted() {
			// this.getolddetail()
			// this.getdetail()
			// console.log(this.detailmsg.accessRoadSclerosis)
			// this.getorgByNodeId()
		},
		methods: {
			//预览图片
			previewPic(item) {
				console.log("图片操作事件", item)
				let arr = []
				arr.push(item)
				console.log('图片预览', arr)
				uni.previewImage({
					urls: arr
				})
			},
			// 车辆详情
			getolddetail(id) {
				return new Promise((resolve, reject) => {
					driverDetail({id: id,pageSize: 10,pageNo: 1}).then(res => {
						let str = '350821 1998041349 17'
						console.log(res, 333)
						if(res) {
							this.detailmsg = res.records[0]
							this.detailmsg.ossShfz =  this.detailmsg.ossShfz ? this.detailmsg.ossShfz.split(',') : []
							this.detailmsg.certificateCy =  this.detailmsg.certificateCy ? this.detailmsg.certificateCy.split(',') : []
							this.detailmsg.driverLicense =  this.detailmsg.driverLicense ? this.detailmsg.driverLicense.split(',') : []
							this.detailmsg.temporaryResidencePermit =  this.detailmsg.temporaryResidencePermit ? this.detailmsg.temporaryResidencePermit.split(',') : []
						}
						resolve(res)
					}).catch(err => {
						reject(err)
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-ap {
		// height: 100vh;
		height: 100%;
		width: 750rpx;
		display: flex;
		flex-direction: column;
        box-sizing: border-box;
		padding-bottom: 500rpx;
		.swiper-item {
			overflow-y: auto;
		}

		.main {
			box-sizing: border-box;
			height: 100%;
			overflow: hidden!important;
			overflow-y: auto!important;
			width: 750rpx;
			background-color: #fff;
			flex-direction: column;
			display: flex;
			color: rgba(16, 16, 16, 100);
			font-size: 32rpx;
			text-align: left;
			font-family: PingFangSC-regular;
			.Category_title {
				display: flex;
				// font-weight: 600;
				// font-size: 32rpx;
				// color: #428FFC;
				height: 92rpx;
				// background-color: #F6F7F8;
				line-height: 100rpx;
				padding-left: 32rpx;

				.line {
					height: 32rpx;
					margin: 32rpx 16rpx 0 0;
					width: 10rpx;
					background-color: rgba(49, 81, 226, 100);
				}
			}
			.item-wrap{
				box-sizing: border-box;
				width: 100%;
				display: flex;
				color: rgba(16, 16, 16, 100);
				font-size: 32rpx;
				text-align: left;
				font-family: PingFangSC-regular;
				margin-bottom: 34rpx;
				padding-left: 30rpx;
				padding-right: 30rpx;
				box-sizing: border-box;
				.title{
					margin-right: 90rpx;
					width: 140rpx;
				}
				.content{
					flex: 1;
					width: 1px;
					text-align: right;
					.image-wrap{
						display: flex;
						flex-wrap: wrap;
						image{
							width: 130rpx;
							height: 124rpx;
							margin-right: 32rpx;
							margin-bottom: 32rpx;
						}
					}
				}
			}
			.image-wrape{
				box-sizing: border-box;
				width: 100%;
				display: flex;
				flex-direction: column;
				color: rgba(16, 16, 16, 100);
				font-size: 32rpx;
				text-align: left;
				font-family: PingFangSC-regular;
				margin-bottom: 34rpx;
				padding-left: 30rpx;
				padding-right: 30rpx;
				box-sizing: border-box;
				.title{
					margin-bottom: 34rpx;
					// margin-right: 90rpx;
					// width: 140rpx;
				}
				.image-panel{
					display: flex;
					flex-wrap: wrap;
					image{
						width: 198rpx;
						height: 166rpx;
						margin-right: 30rpx;
						margin-bottom: 30rpx;
					}
				}
			}
			.person-wrap{
				width: 100%;
				display: flex;
				color: rgba(16, 16, 16, 100);
				padding-left: 30rpx;
				margin-top: 30rpx;
				box-sizing: border-box;
				.person-item{
					display: flex;
					justify-content: center;
					align-items: center;
					min-width: 352rpx;
					height: 72rpx;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					background-color: rgba(86, 119, 252, 100);
					color: rgba(255, 255, 255, 100);
					font-size: 14px;
					text-align: center;
					box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(0, 0, 0, 0.24);
					font-family: Arial;
				}
			}
		}
	}
</style>
